<template>
<BaseHeader />
  <div class="user-message anime-theme">    
    <div class="message-container">
      <div class="message-list">
        <div v-for="chat in chatList" :key="chat.id" class="chat-item" @click="selectChat(chat.id)">
          <img :src="chat.avatar" :alt="chat.name" class="avatar">
          <div class="chat-info">
            <h3>{{ chat.name }}</h3>
            <p>{{ chat.lastMessage }}</p>
          </div>
        </div>
      </div>
      
      <div class="message-content">
        <div class="messages" ref="messageContainer">
          <div v-for="message in currentChatMessages" :key="message.id" :class="['message', message.isSelf ? 'self' : 'other']">
            <img :src="message.avatar" :alt="message.name" class="avatar">
            <div class="message-bubble">{{ message.content }}</div>
          </div>
        </div>
        
        <div class="message-input">
          <textarea v-model="newMessage" placeholder="输入消息..."></textarea>
          <button @click="sendMessage">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import BaseHeader from '@/components/common/BaseHeader.vue'

export default defineComponent({
  name: 'UserMessage',
  components: { BaseHeader },
  setup() {
    const chatList = ref([
      {
        id: 1,
        name: '初音未来',
        avatar: '/avatars/miku.jpg',
        lastMessage: '今天要一起去看演唱会吗？'
      },
      {
        id: 2,
        name: '路飞',
        avatar: '/avatars/luffy.jpg',
        lastMessage: '我要成为海贼王！'
      },
      {
        id: 3,
        name: '宫崎骏',
        avatar: '/avatars/miyazaki.jpg',
        lastMessage: '下部电影的剧本已经完成了。'
      },
      {
        id: 4,
        name: '皮卡丘',
        avatar: '/avatars/pikachu.jpg',
        lastMessage: '皮卡皮卡！'
      },
      {
        id: 5,
        name: '凉宫春日',
        avatar: '/avatars/haruhi.jpg',
        lastMessage: 'SOS团今天有什么新活动？'
      },
      {
        id: 1,
        name: '初音未来',
        avatar: '/avatars/miku.jpg',
        lastMessage: '今天要一起去看演唱会吗？'
      },
      {
        id: 2,
        name: '路飞',
        avatar: '/avatars/luffy.jpg',
        lastMessage: '我要成为海贼王！'
      },
      {
        id: 3,
        name: '宫崎骏',
        avatar: '/avatars/miyazaki.jpg',
        lastMessage: '下部电影的剧本已经完成了。'
      },
      {
        id: 4,
        name: '皮卡丘',
        avatar: '/avatars/pikachu.jpg',
        lastMessage: '皮卡皮卡！'
      },
      {
        id: 5,
        name: '凉宫春日',
        avatar: '/avatars/haruhi.jpg',
        lastMessage: 'SOS团今天有什么新活动？'
      },
      {
        id: 1,
        name: '初音未来',
        avatar: '/avatars/miku.jpg',
        lastMessage: '今天要一起去看演唱会吗？'
      },
      {
        id: 2,
        name: '路飞',
        avatar: '/avatars/luffy.jpg',
        lastMessage: '我要成为海贼王！'
      },
      {
        id: 3,
        name: '宫崎骏',
        avatar: '/avatars/miyazaki.jpg',
        lastMessage: '下部电影的剧本已经完成了。'
      },
      {
        id: 4,
        name: '皮卡丘',
        avatar: '/avatars/pikachu.jpg',
        lastMessage: '皮卡皮卡！'
      },
      {
        id: 5,
        name: '凉宫春日',
        avatar: '/avatars/haruhi.jpg',
        lastMessage: 'SOS团今天有什么新活动？'
      }
    ])

    const currentChatId = ref(1)

    const currentChatMessages = ref([
      {
        id: 1,
        content: '你好！最近在看什么动漫？',
        isSelf: true,
        avatar: '/avatars/user.jpg'
      },
      {
        id: 2,
        content: '我最近在重温《进击的巨人》，真是太精彩了！',
        isSelf: false,
        avatar: '/avatars/miku.jpg'
      },
      {
        id: 3,
        content: '确实很棒！我也很喜欢。对了，听说要出最终季了？',
        isSelf: true,
        avatar: '/avatars/user.jpg'
      },
      {
        id: 4,
        content: '是的，我已经等不及了！我们要一起看吗？',
        isSelf: false,
        avatar: '/avatars/miku.jpg'
      }
    ])

    const newMessage = ref('')

    const selectChat = (chatId: number) => {
      currentChatId.value = chatId
      // 这里应该根据选择的聊天加载相应的消息
      // 为了演示，我们只是清空当前消息
      currentChatMessages.value = []
    }

    const sendMessage = () => {
      if (newMessage.value.trim()) {
        currentChatMessages.value.push({
          id: currentChatMessages.value.length + 1,
          content: newMessage.value,
          isSelf: true,
          avatar: '/avatars/user.jpg'
        })
        newMessage.value = ''
      }
    }

    return {
      chatList,
      currentChatMessages,
      newMessage,
      selectChat,
      sendMessage
    }
  }
})
</script>

<style lang="scss" scoped>
// 定义动漫风格的主题样式
.anime-theme {
  --primary-color: #a0d8ef;
  --secondary-color: #f0f0f0;
  --text-color: #333;
  --border-color: #eee;
  padding: 20px 20px;
  width: 90%;
  height: 624px;
}

.user-message {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: var(--text-color);

  .message-container {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  .message-list {
    width: 300px;
    border-right: 1px solid var(--border-color);
    overflow-y: auto;

    .chat-item {
      display: flex;
      padding: 10px;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }

      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
      }

      .chat-info {
        h3 {
          margin: 0;
          font-size: 16px;
        }

        p {
          margin: 5px 0 0;
          font-size: 14px;
          color: #666;
        }
      }
    }
  }

  .message-content {
    flex: 1;
    display: flex;
    flex-direction: column;

    .messages {
      flex: 1;
      overflow-y: auto;
      padding: 20px;

      .message {
        display: flex;
        margin-bottom: 20px;

        &.self {
          flex-direction: row-reverse;

          .message-bubble {
            background-color: var(--primary-color);
            color: white;
          }
        }

        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }

        .message-bubble {
          max-width: 70%;
          padding: 10px 15px;
          border-radius: 20px;
          background-color: var(--secondary-color);
          margin: 0 10px;
        }
      }
    }

    .message-input {
      display: flex;
      padding: 10px;
      border-top: 1px solid var(--border-color);

      textarea {
        flex: 1;
        height: 40px;
        resize: none;
        border: 1px solid var(--border-color);
        border-radius: 20px;
        padding: 10px;
        font-size: 14px;
      }

      button {
        margin-left: 10px;
        padding: 0 20px;
        border: none;
        background-color: var(--primary-color);
        color: white;
        border-radius: 20px;
        cursor: pointer;
        transition: background-color 0.3s;

        &:hover {
          background-color: darken(#a0d8ef, 10%);
        }
      }
    }
  }
}
</style>
